<template>
    <div class="page">
        <div class="page_header" style="display: flex;">
            <div style="flex: 1 1 auto">
                <el-form ref="searchForm" :model="searchForm" style="display: flex;">
                    <el-form-item prop="consume" style="margin-right: 10px;">
                        <el-radio-group v-model="searchForm.consume" @change="$store.dispatch('tableReload')">
                            <el-radio-button :label="false">所有活动</el-radio-button>
                            <el-radio-button :label="true">待核销</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item prop="status">
                        <el-select v-model="searchForm.status" multiple placeholder="活动状态">
                            <el-option
                                v-for="item in statusGroup"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div style="flex:0 0 auto;">
                <el-button @click="$store.dispatch('tableReload')" type="primary">查询</el-button>
                <el-button @click="$store.dispatch('tableReset')">重置</el-button>
            </div>
        </div>
        <el-card class="page_body">
            <el-table
                    height="10"
                    class="page_body_table"
                    :data="common.tableData"
                    v-loading="common.loading"
                    border
                    stripe
                    style="width: 100%">
                <el-table-column prop="status_name" width="90" label="状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status === 0">{{scope.row.status_name}}</el-tag>
                        <el-tag type="warning" v-if="scope.row.status === 1">{{scope.row.status_name}}</el-tag>
                        <el-tag type="danger" v-if="scope.row.status === 2">{{scope.row.status_name}}</el-tag>
                        <el-tag type="success" v-if="scope.row.status === 3">{{scope.row.status_name}}</el-tag>
                        <el-tag type="info" v-if="scope.row.status === 4">{{scope.row.status_name}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="act_no" label="活动编号" width="140">
                    <template slot-scope="scope">
                        <el-button type="text" @click="$refs.activityDetail.init(scope.row)">{{scope.row.act_no}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="goods_name" label="奖品"></el-table-column>
                <el-table-column prop="shop_type_name" label="店铺类型"></el-table-column>
                <el-table-column prop="shop_name" label="店铺">
                    <template slot-scope="scope">
                        <el-button type="text" @click="$refs.shopDetail.init(scope.row.shop_id)">{{scope.row.shop_name}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="creator_name" label="创建人"></el-table-column>
                <el-table-column prop="count" label="参与人数" width="80px;" align="center"></el-table-column>
                <el-table-column prop="start_time" label="开始日期" width="150"></el-table-column>
                <el-table-column prop="end_time" label="结束日期" width="150"></el-table-column>
                <el-table-column prop="draw_time" label="开奖时间" width="150"></el-table-column>
<!--                <el-table-column prop="is_stop" label="启/禁用" width="80px;" align="center">-->
<!--                    <template slot-scope="scope">-->
<!--                        <el-tag v-if="scope.row.is_stop === 0" type="success" @click="statusChange(scope.row)" style="cursor: pointer;">开启</el-tag>-->
<!--                        <el-tag v-else-if="scope.row.is_stop === 1" type="danger" @click="statusChange(scope.row)" style="cursor: pointer;">关闭</el-tag>-->
<!--                        <el-tag v-else type="info">状态异常</el-tag>-->
<!--                    </template>-->
<!--                </el-table-column>-->
            </el-table>
            <pagination class="page_body_pagination"></pagination>
        </el-card>
        <activity-detail-dialog ref="activityDetail" @refresh="$store.dispatch('tableReload')" ></activity-detail-dialog>
        <shop-detail-dialog ref="shopDetail" @refresh="$store.dispatch('tableReload')"></shop-detail-dialog>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    import ActivityDetailDialog from "./Dialog/ActivityDetailDialog";
    import ShopDetailDialog from "../laifei/Dialog/ShopDetailDialog";
    import Pagination from "../Pagination";
    export default {
        computed:{
            ...mapState(['common']),
        },
        components:{
            Pagination,
            ActivityDetailDialog,
            ShopDetailDialog,
        },
        data(){
            return{
                method:'post',
                url:'/api/activity/activity/store',
                searchForm:{
                    status:[],
                    consume:false,
                },
                statusGroup:[
                    {value: 0, label: '未开奖'},
                    {value: 1, label: '审核中'},
                    {value: 2, label: '已开奖'},
                    {value: 3, label: '已完成'},
                    {value: 4, label: '已取消'},
                ],
            }
        },
        created(){
            this.$store.dispatch('pageInit', this);
        },
        methods:{
            statusChange(row){
                let that = this;
                let is_stop = 0;
                if(row.is_stop === 0){
                    is_stop = 1;
                }
                this.$confirm('确定修改此活动的状态?', '提示', {
                    type: 'warning'
                }).then(() => {
                    that.post('/api/activity/activity/status',{act_id:row.act_id,is_stop:is_stop}).then(result=>{
                        if(result.code === 0){
                            that.$message.success(result.msg);
                            that.$store.dispatch('tableReload');
                        }else{
                            that.$message.error(result.msg);
                        }
                    }).catch(e=>{
                        console.log(e);
                        that.$message.error('系统异常，请重试');
                    })
                }).catch(() => {
                    this.$message.info('已取消');
                });
            },
            async test(){
                console.log('begin');
                await this.timeout();
                console.log(1);
                await this.timeout();
                console.log(2);
                await this.timeout();
                console.log(3);
                await this.timeout();
                console.log(4);
                await this.timeout();
                console.log('end');
            },
            timeout() {
                let that = this;
                return new Promise((resolve, reject) => {
                    that.post('/api/activity/activity/store',{}).then(result=>{
                        if(result.code === 0){
                            that.$message.success(result.msg);
                            resolve();
                        }else{
                            that.$message.error(result.msg);
                            resolve();
                        }
                    }).catch(e=>{
                        console.log(e);
                        that.$message.error('系统异常，请重试');
                        reject('请求异常');
                    })
                });
            },
        },

    }
</script>

<style scoped>

</style>
